<template>
  <div class="user-interface">
    <div class="top-title">
      <span class="title-text">欢迎回来</span>
      <span class="text">我是您的健康智慧管家</span>
    </div>
    <div class="bg"></div>
    <ul class="device-infomation">
      <li class="infomation">
        <img src="../assets/images/icon.png" alt="" class="img" />
        <ul class="text">
          <li class="text-item">
            <span class="text"> 姓名：</span>
            <span class="value">{{ info.truename }}</span>
          </li>
          <li class="text-item">
            <span class="text"> 性别：</span>
            <span class="value">{{ info.sex }}</span>
          </li>
          <li class="text-item">
            <span class="text">年龄：</span>
            <span class="value">{{ info.age }}</span>
          </li>
          <li class="state">
            <span class="text">当前状态:</span>
            <span class="value">{{ state }}</span>
          </li>
        </ul>
      </li>
      <li class="device-option">
        <ul class="option-one">
          <li class="option-item">
            <img src="../assets/images/wifi.png" alt="" class="icon" />
            <span class="text">在线</span>
          </li>
          <li class="option-item">
            <div class="percent" style="width: 11px">
              <div class="inner" :style="{ width: parseFloat(percent / 10) + 'px' }"></div>
            </div>
            <span class="text">{{ percent }}%</span>
          </li>
          <li class="option-item" @click="change">
            <img src="../assets/images/option.png" alt="" class="icon" />
            <span class="text">切换</span>
          </li>
        </ul>
        <ul class="selecter" v-show="selecterShow">
          <li class="selecter-item">小米</li>
          <li class="selecter-item">小花</li>
          <!-- <li class="selecter-item">小月</li> -->
        </ul>
      </li>
    </ul>
    <ul class="data-list">
      <!-- 心率 -->

      <li class="data-item">
        <span class="icon-content">
          <span class="text">心率</span>
          <img src="../assets/images/data-icon1.png" alt="" class="icon" />
        </span>
        <div class="chart-content">
          <div class="line-title">
            <span class="text">平均心率</span>

            <div class="num-text">
              <span class="num">{{ hr }}</span>
              <span class="desc"> 次/分 </span>
            </div>
          </div>
          <div class="chart"></div>
        </div>
      </li>
      <!-- 呼吸 -->
      <li class="data-item">
        <span class="icon-content">
          <span class="text">呼吸</span>
          <img src="../assets/images/data-icon2.png" alt="" class="icon" />
        </span>
        <div class="chart-content">
          <div class="line-title">
            <span class="text">平均呼吸率</span>

            <div class="num-text">
              <span class="num">{{ br }}</span>
              <span class="desc"> 次 </span>
            </div>
          </div>
          <div class="chart"></div>
        </div>
      </li>
      <!-- 体动 -->
      <!-- <li class="data-item">
        <span class="icon-content">
          <span class="text">体动</span>
          <img src="../assets/images/data-icon3.png" alt="" class="icon" />
        </span>
        <div class="chart-content">
          <div class="line-title">
            <span class="text">体动次数</span>

            <div class="num-text">
              <span class="num">69</span>
              <span class="desc"> 次/分 </span>
            </div>
          </div>
          <div class="chart"></div>
        </div>
      </li> -->

      <!-- <li class="data-item">
        <span class="icon-content">
          <span class="text">打鼾</span>
          <img src="../assets/images/data-icon4.png" alt="" class="icon" />
        </span>
        <div class="chart-content">
          <div class="line-title">
            <span class="text">打鼾次数</span>

            <div class="num-text">
              <span class="num">69</span>
              <span class="desc"> 次/分 </span>
            </div>
          </div>
          <div class="chart"></div>
        </div>
      </li>
  -->
      <!-- <li class="data-item">
        <span class="icon-content">
          <span class="text">呼吸暂停</span>
          <img src="../assets/images/data-icon5.png" alt="" class="icon" />
        </span>
        <div class="chart-content">
          <div class="line-title">
            <span class="text">呼吸暂停</span>

            <div class="num-text">
              <span class="num">0</span>
              <span class="desc"> 次 </span>
            </div>
          </div>
          <div class="chart"></div>
        </div>
      </li> -->
    </ul>
    <!-- 实时预警 -->
    <div class="warn-content">
      <div class="icon-content">
        <div class="text" style="width: 60px">实时预警</div>
        <img src="../assets/images/icon-warn.png" alt="" class="icon" />
      </div>
      <div class="table">
        <table>
          <thead>
            <th>预警项目</th>
            <th>时间</th>
            <th>设备SN</th>
          </thead>
          <tbody>
            <tr v-for="item in warnItems" v-bind:key="item.id">
              <td>{{ item.warn_desc }}</td>
              <td>{{ item.warn_time }}</td>
              <td>{{ item.code }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { myInfo } from "../api/users";
import { DeviceList } from "../api/device";
import { warnList } from "../api/warn";

export default {
  data() {
    return {
      selecterShow: false,
      mqtt: "",
      code: "",
      info: {},
      state: "",
      hr: "",
      percent: '50',
      br: "",
      warnItems: [],
    };
  },
  components: {},
  methods: {
    change() {
      this.selecterShow = !this.selecterShow;
    },
    async getReport() {
      var token = localStorage.getItem("token");
      var obj = await DeviceList({ token: token });
      if (obj.status == 200) {
        var list = obj.data;

        if (list.length > 0) {
          this.code = list[0].code;
          this.MQTTconnect();
          this.getWarn();
        }
      }
    },
    MQTTconnect() {
      const host = "mqtt.sanqinjiabao.com";

      const port = 8084;
      var token = localStorage.getItem("token");
      var clientId = "userid" + token;
      this.mqtt = new Paho.MQTT.Client(host, port, "/mqtt", clientId);
      this.mqtt.onConnectionLost = this.onConnectionLost;
      this.mqtt.onMessageArrived = this.onMessageArrived;
      let options = {
        timeout: 3,
        keepAliveInterval: 30,
        mqttVersion: 4,
        cleanSession: true,
        onSuccess: this.onConnect,
        onFailure: this.onFailure,
        useSSL: true,
      };
      this.mqtt.connect(options);
    },
    onConnectionLost(response) {
      console.log("未连接服务器 : " + response);
      setTimeout(this.MQTTconnect, 10000);
    },
    onMessageArrived(message) {
      let TX_topic = "/sleep/" + this.code;

      console.log("message", message);
      if (message.destinationName == TX_topic) {
        let payload = message.payloadString;
        let obj = JSON.parse(payload);

        console.log("obj", obj);

        this.hr = obj.hr;
        this.br = obj.br;

        if (obj.state == "03") {
          this.state = "在床";
        } else if (obj.state == "04") {
          this.state = "离床";
        } else if (obj.state == "05") {
          this.state = "打鼾";
        } else if (obj.state == "06") {
          this.state = "体动";
        }
      }
    },
    onConnect() {
      console.log("连接成功");
      let TX_topic = "/sleep/" + this.code;
      console.log("TX_topic", TX_topic);
      this.mqtt.subscribe(TX_topic, { qos: 0 });
    },
    onFailure(message) {
      console.log("连接失败 : " + message);
      setTimeout(this.MQTTconnect, 10000);
    },
    idCard(userCard, num) {
      //获取出生日期
      var birth;
      if (num == 1) {
        birth =
          userCard.substring(6, 10) +
          "-" +
          userCard.substring(10, 12) +
          "-" +
          userCard.substring(12, 14);
        return birth;
      }
      //获取性别
      if (num == 2) {
        if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
          return "男";
        } else {
          return "女";
        }
      }
      //获取年龄
      if (num == 3) {
        var myDate = new Date();
        var month = myDate.getMonth() + 1;
        var day = myDate.getDate();
        var age = myDate.getFullYear() - userCard.substring(6, 10) - 1;
        if (
          userCard.substring(10, 12) < month ||
          (userCard.substring(10, 12) == month &&
            userCard.substring(12, 14) <= day)
        ) {
          age++;
        }
        return age;
      }
    },
    async getInfo() {
      var token = localStorage.getItem("token");
      var obj = await myInfo({ token: token });
      if (obj.status == 200) {
        this.info = obj.data;

        var sex = this.idCard(obj.data.idcard, 2);
        var age = this.idCard(obj.data.idcard, 3);
        this.info.sex = sex;
        this.info.age = age;
      }
    },
    async getWarn() {
      var token = localStorage.getItem("token");
      var obj = await warnList({ token: token, code: this.code });
      if (obj.status == 200) {
        this.warnItems = obj.data;
      }
    },
  },
  created() {
    this.getInfo();
    this.getReport();
  },
};
</script>

<style lang="less" scoped>
.user-interface {
  width: 750px;
  background-color: #030542;
  padding-top: 80px;
  height: 100vh;
  font-size: 20px;
  padding-bottom: 30px;

  .top-title {
    width: 620px;
    margin: 0 auto;

    .title-text {
      color: #ffffff;
      font-size: 33px;
      font-weight: bold;
      font-weight: bold;
    }

    .text {
      font-size: 20px;
      color: #fff;
      margin-left: 20px;
    }
  }

  .bg {
    width: 750px;
    height: 51px;
    background-color: #c62192;
    margin-top: 50px;
  }

  .device-infomation {
    margin-top: -50px;
    display: flex;
    justify-content: space-between;
    padding-left: 76px;

    .infomation {
      display: flex;
      align-items: center;
      width: 620px;
      margin: 0 auto;

      .img {
        width: 117px;
        height: 165px;
        border-radius: 5px;
        margin-right: 20px;
      }

      .text {
        .text-item {
          color: #fff;

          margin-bottom: 8px;

          .text {
            font-size: 23px;
            font-weight: bold;
          }

          .value {
            margin-left: 10px;
            font-size: 23px;
          }
        }

        .state {
          background-color: #e25283;
          padding: 0 20px;
          height: 35px;
          border-radius: 5px;

          .text {
            color: #eec721;
            font-weight: bold;
            font-size: 25px;
            margin-right: 20px;
          }

          .value {
            color: #fff;
            font-size: 25px;
          }
        }
      }
    }

    .device-option {
      .option-one {
        width: 310px;
        background-color: #8520b4;
        border-radius: 30px 0 0 30px;
        display: flex;
        align-items: center;
        padding-left: 50px;
        box-sizing: border-box;
        height: 50px;

        display: flex;

        .option-item {
          display: flex;
          align-items: center;
          margin-right: 5px;

          .percent {
            height: 16px;
            border: 2px solid #e0dfdf;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            margin-right: 10px;

            .inner {
              height: 12px;
              background-color: #e3e2e2;
            }

            .inner ::after {
              content: "";
              display: inline-block;
              width: 50px;
              height: 5px;
              border: 1px solid #fff;
              position: absolute;
              right: 0;
              z-index: 99999999;
            }
          }

          margin-right: 10px;

          .icon {
            width: 25px;
            height: 26px;
            margin-right: 10px;
          }

          .text {
            color: #fff;
            font-size: 20px;
          }
        }
      }

      .selecter {
        width: 90px;

        background-color: #e25283;

        box-sizing: border-box;
        margin-left: 200px;
        border-radius: 10px;
        margin-top: 10px;

        .selecter-item {
          color: #fff;
          text-align: center;
          font-size: 22px;
          line-height: 30px;
          font-weight: bold;
          border-bottom: 1px solid #fff;
        }

        .selecter-item:last-child {
          font-size: 22px;
          border-bottom: none;
        }
      }
    }
  }

  .data-list {
    margin: 0 auto;
    width: 620px;
    margin-top: 50px;

    .data-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 620px;
      margin-bottom: 28px;

      .icon-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .text {
          color: #fff;
          font-size: 20px;
          font-weight: bold;
        }

        .icon {
          width: 103px;
          height: 103px;
        }
      }

      .chart-content {
        width: 490px;
        height: 195px;
        background-color: #341a4b;
        border-radius: 10px;

        .line-title {
          display: flex;
          justify-content: space-between;
          padding-left: 30px;
          padding-right: 20px;
          color: #fff;
          line-height: 50px;

          .text {
            color: #79678b;
            font-size: 26px;
          }

          .num-text {
            display: flex;
            color: #79678b;
            font-size: 25px;

            .num {
              color: #fff;
              font-weight: bold;
              font-size: 33px;
              margin-right: 20px;
            }

            .desc {
              color: #79678b;
            }
          }
        }

        .chart {
          width: 500px;
          height: 190px;
        }
      }
    }
  }

  .warn-content {
    display: flex;
    width: 620px;
    margin: 20px auto;
    align-items: center;
    justify-content: space-between;

    .icon-content {
      color: #fff;
      font-size: 15px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon {
        width: 40px;
        margin-top: 20px;
        height: 40px;
      }
    }

    table {
      border: 1px solid #fff;
      width: 550px;
      color: #fff;
      font-size: 20px;
      margin-top: 20px;

      th {
        border-bottom: 1px solid #e0dfdf;
        line-height: 40px;
        font-size: 25px;
        text-align: center;
      }

      td {
        text-align: center;
      }
    }
  }
}
</style>